<!-- 日程安排 -->
<template>
	<view class="mainPge">
		<!--主体-->
		<view class="page-content outbottom">
			<view class="frct1">
				<view class="fr-colum1">
					<view class="fr-lable1">
						<text class="redico1" v-show='!params.id'>*</text>
						<text>日程主题：</text>
						<input class="zt-uni-input comfont" placeholder="请输入日程主题" v-model="params.title"
							style="margin-top: 20px;font-size: 17px;text-align: left!important;" />
					</view>
				</view>
			</view>
			<view class="frct">
				<view class="fr-row frit" @click="openStartTime">
					<view class="fr-lable fr-2">
						<text class="redico" v-show='!params.id'>*</text>
						开始时间
					</view>
					<view class="fr-row" v-if="!params.startTime">
						<text class="qxzstr defaultstr comfont">请选择 ></text>
					</view>
					<view class="fr-row" v-else>
						<text class="defaultstr">{{ params.startTime }}</text>
					</view>
				</view>

				<view class="fr-row frit" @click="openEndTime">
					<view class="fr-lable fr-2">
						<text class="redico" v-show='!params.id'>*</text>
						结束时间
					</view>
					<view class="fr-row" v-if="!params.endTime">
						<text class="qxzstr defaultstr comfont">请选择 ></text>
					</view>
					<view class="fr-row" v-else>
						<text class="defaultstr">{{ params.endTime }}</text>
					</view>
				</view>
				<view class="fr-row frit">
					<view class="fr-lable fr-2">地点<!-- <text class="redico" v-show='!params.id'>*</text> --></view>
					<input class="dd-uni-input comfont" placeholder="请输入地点" v-model="params.address"
						style="margin-top: 10px;font-size: 17px;text-align: left;" />
				</view>
				<view class="fr-row frit" @click="getPerson">
					<view class="fr-lable fr-2">
						参与人员
						<!-- <text class="redico" v-show='!params.id'>*</text> -->
					</view>
					<view class="fr-row" v-if="!params.peoplesName">
						<text class="qxzstr defaultstr comfont">请选择参与人 ></text>
					</view>
					<view class="fr-row" style="display: block;" v-else>
						<text class="qxzstr">选择如下</text>
					</view>
				</view>
				<view class="fr-row frit" v-if="params.peoplesName">
					<view class="fr-row" style="display: block;">
						<text class="defaultstr">{{ params.peoplesName }}</text>
					</view>
				</view>

			</view>
			<view class="frct">
				<view class="fr-row frit">
					<view class="fr-lable fr-2">备注</view>
					<input class="comfont" placeholder="请输入备注信息" v-model="params.memo" style="font-size: 17px;" />
				</view>
			</view>
			<!-- <van-cell-group inset style="margin-top: 10px;">
				<view>
					<van-field v-model="params.memo" label="备注" placeholder="请输入备注" />
				</view>
			</van-cell-group> -->
		</view>
		<!-- 日期时间用法 -->
		<uni-datetime-picker ref="startTimePicker" type="datetime" mode="popup" v-model="params.startTime"
			@change="handleChange1" />
		<uni-datetime-picker ref="endTimePicker" type="datetime" mode="popup" v-model="params.endTime"
			@change="handleChange2" />
		<!--底部固定 新增-->
		<view class="bt-foot" v-if="!params.id">
			<view class="bt bt2" style="margin: 0 15px;flex: 1;" @click="submit">保存</view>
		</view>
		<!--底部固定 查看-->
		<view class="bt-foot" v-else>
			<view class="bt bt3" @click="deletefn">删除</view>
			<view class="bt bt2" @click="submit">修改</view>
		</view>
	</view>
</template>

<script>
	import {
		getCookie
	} from '../../utils/js-cookie';
	import {
		scheduleSave,
		scheduleCheck,
		scheduleUpdate,
		scheduleDelete
	} from '@/api/schedule.js'
	export default {
		name: 'checkAndSaveSchedule',
		data() {
			return {
				// peoplesName: '',
				params: {
					id: '',
					orgCode: '',
					orgName: '',
					ownerAccount: '',
					ownerId: '',
					title: "",
					type: "6",
					startDate: "",
					startTime: "",
					endDate: "",
					endTime: "",
					address: "",
					peoplesId: "",
					peoplesAccount: "",
					memo: "",
					creator: "",
					peoplesName: ''
				}
			};
		},
		onLoad(e) {
			this.params.id = e.id
			e.id && this.getDetail(e.id)
			e.id && uni.setNavigationBarTitle({
				title: '查看日程'
			});
			let userInfo = JSON.parse(getCookie('userInfo'));
			this.params.orgCode = userInfo.orgCode;
			this.params.orgName = userInfo.orgName;
			this.params.ownerAccount = userInfo.personAccount;
			this.params.ownerId = userInfo.personId;
			this.params.creator = userInfo.personId;
			this.params.type = '6';
		},
		onShow() {
			// 获取参会人列表数据
			const data = uni.getStorageSync("selectPsersonData")
			if (data) {
				const {
					ids,
					names,
					personList
				} = this.isJson(data) ? JSON.parse(data) : []
				this.params.peoplesAccount = personList.map(item => item.account).join(",")
				this.params.peoplesId = ids
				this.params.peoplesName = names
			}
			if (this.params.peoplesName) {
				uni.removeStorageSync("selectPsersonData")
			}
		},
		methods: {
			deletefn() {
				scheduleDelete(this.params.id).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000);
					}
				})
			},
			getDetail(id) {
				scheduleCheck(id).then(res => {
					if (res.data.code == 200) {
						const source = res.data.data;
						// 只赋值 this.params 中已有的 key
						Object.keys(this.params).forEach(key => {
							if (source.hasOwnProperty(key)) {
								this.params[key] = source[key];
							}
						});
					}
				});
			},
			submit() {
				if (!this.params.title) {
					uni.showToast({
						title: '请输入日程主题',
						icon: 'none'
					})
				} else if (!this.params.startTime) {
					uni.showToast({
						title: '请选择开始时间',
						icon: 'none'
					})
				} else if (!this.params.endTime) {
					uni.showToast({
						title: '请选择结束时间',
						icon: 'none'
					})
				}
				// else if (!this.params.address) {
				// 	uni.showToast({
				// 		title: '请填写地点',
				// 		icon: 'none'
				// 	})
				// } 
				else {
					this.params.type = '6'
					if (!this.params.id) {
						scheduleSave(JSON.stringify(this.params)).then(res => {
							console.log(res);
							if (res.data.code == 200) {
								uni.showToast({
									title: '保存成功',
									icon: 'none'
								})

							}
						})
					} else {
						scheduleUpdate(JSON.stringify(this.params)).then(res => {
							console.log(res);
							if (res.data.code == 200) {
								uni.showToast({
									title: '修改成功',
									icon: 'none'
								})
							}
						})
					}
					uni.removeStorageSync("selectPsersonData")
					this.setOwnPropertiesToNull(this.params)
					// this.peoplesName = ''
					this.type = '6'
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000);
				}
			},
			setOwnPropertiesToNull(obj) {
				Object.keys(obj).forEach(key => {
					obj[key] = null;
				});
				return obj; // 返回修改后的原对象
			},
			isJson(val) {
				try {
					JSON.parse(val)
					return true
				} catch {
					return false
				}
			},
			openStartTime() {
				this.$refs.startTimePicker.show();
			},
			openEndTime() {
				this.$refs.endTimePicker.show();
			},
			handleChange1(e) {
				this.params.startDate = e
			},
			handleChange2(e) {
				this.params.endDate = e
			},
			// 去选择参会人
			getPerson() {
				uni.navigateTo({
					url: "/documentManagement/selectPerson/circulate"
				})
			},
		}
	};
</script>
<style scoped lang="scss">
	@import '../../style/documentmanage.scss';

	.comfont {
		font-weight: 500 !important;
		font-size: 15px !important;
		color: #E8E8E8;
	}

	::v-deep .uni-date-editor {
		visibility: hidden;
	}

	.mainPge .frct .qxzstr {
		font-weight: 500 !important;
		font-size: 15px !important;
		color: #E8E8E8 !important;
	}

	.mainPge {
		height: 95vh;
	}

	.mainPge .frct .fr-row .fr-lable {
		width: 7rem;
		color: #646566;
		text-align: left;
		word-wrap: break-word;
	}

	.frct1 {
		margin: 17px;
		margin-bottom: 0;
		padding: 17px;
		font-size: 17px;
		background: #fff;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
	}

	.frct1 .fr-colum1 {
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.frct1 .fr-lable1 {
		padding-bottom: 0;
		color: #555555;
		font-weight: bold;
	}

	.frct1 .redico1 {
		color: #ff6060;
		padding: 0 4px;
	}

	.uni-input {
		display: block;
		font-size: 16px;
		line-height: 1.4em;
		height: 1.4em;
		min-height: 1.4em;
		overflow: hidden;
	}

	.uni-input-placeholder,
	.uni-input-input{
		font-weight: 500 !important;
		font-size: 15px !important;
		color: #E8E8E8 !important;
	}

	::v-deep .date-box .box-list .day-content .day-item .day-dot {
		bottom: auto;
		top: 0;
		left: 0;
	}

	.mainPge .page-content {
		margin-top: 0;
	}
</style>